<template>
	<view>
		<view class="peisong-box">
			<view style="font-size: 12px;">请选择配送方式</view>
			<view class="peisongType">
				<radio-group name="peisongType" @change="selectPeisong">
					<view>
						<label>
							<radio :value="kuaidi" /><text>快递</text>
						</label>
					</view>
				</radio-group>
			</view>
			<view class="dizhi-wrapper" v-show="type=='kuaidi'">
				<view class="dizhi-box">
					<view class="mapdot">
						<u-icon name="map" size="28"></u-icon>
					</view>
					<view class="dizhi-info">
						<view>收货人：{{adName}}</view>
						<view>收货地址：<text class="moren">[默认]</text> {{adDetail}}</view>
					</view>
					<view class="tel">
						{{adPhone}}
					</view>
				</view>
				<view class="other-box" @click="otherDizhi()">其他地址 <uni-icons type="arrowright" size="20"></uni-icons></view>
			</view>
		</view>
		<view class="tips tips2">商品信息</view>
		<view class="goods-info">
			<view>
				<image :src="switchImg(gImages)" class="goods-img" mode="heightFix"></image>
			</view>
			<view class="goods-name">
				<view>
					<view>{{gName}}</view>
					<view class="qian">{{gPrice}}/{{gdanwei}}</view>
				</view>
				<view>
					<view class="guige">{{guige}}</view>
					<view class="btn-group">
						<view class="jian" @click="numJian()">-</view>
						<view class="num">{{num}}</view>
						<view class="jia" @click="numJia()">+</view>
					</view>
				</view>
			</view>
		</view>
		<view class="peisong-box xingzhi">
			<view class="yunfei-box">
				<view>运费</view>
				<view>{{yunfei}}元</view>
			</view>
			<view>
				<view>买家留言：<input type="text" v-model="liuyan" placeholder="选填:对本次交易的说明" style="border: 1rpx #CCCCCC solid;padding: 15rpx;" /></view>
			</view>
		</view>
		<view class="bottom">
			<view style="padding-left: 20rpx;">
				共<text>{{num}}</text>件 总金额：<text style="color: red;">幸运币{{num}}</text>
			</view>
			<view class="confirm-btn" @click="goPay()">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ziti:"ziti",
				kuaidi:"kuaidi",
				type:'',		// 配送类型
				liuyan:"",		// 留言备注
				adid:"",		// 收货地址编号
				adName:"",		// 收货人信息
				adDetail:"",	// 收货地址
				adPhone:"",		// 收货人电话
				gid:'',			// 商品id
				gImages:"",		// 商品图片
				gName:"",		// 商品名称
				gPrice:"",		// 商品价格
				gdanwei:"",		// 商品单位
				guige:"",		// 商品规格
				names:"",		// 地址栏的规格值
				params:"",		// 地址栏的规格下标
				num:1,			// 购买数量
				allMoney:0,		// 总价格
				yunfei:0,		// 订单运费
			}
		},
		onLoad(opt) {
			this.gName = opt.gname;
			this.allMoney = opt.gprice*opt.num;
			this.gPrice = opt.gprice;
			this.gImages = opt.gimages;
			this.gdanwei = opt.gdanwei;
			this.gid = opt.gid;
			this.names = opt.names?opt.names:null;
			this.params = opt.params?opt.params:null;
			this.num = opt.num;
			this.guige = opt.names?opt.names:null;
			uni.$on('getDizhiFromLjgm',this.getDizhiFromLjgm);
		},
		methods: {
			// 获取收货地址from 立即购买
			getDizhiFromLjgm(){
				let uid = uni.getStorageSync('usersId');
				this.$http.get('/xieliancat.do?p=getAllAddress', {
					'userid':uid
				}).then(response => {
					this.adid = response.data.adId;
					this.adName = response.data.adName;
					this.adDetail = response.data.adDetail;
					this.adPhone = response.data.adPhone;
				})
			},
			// 选择配送方式
			selectPeisong(res){
				this.getDizhiFromLjgm();
				this.type = res.detail.value;
				//算运费
				this.$http.get('/yunfei/check',{
					gid:this.gid,
					jifen:this.allMoney
				}).then(res => {
					if(res.data.code==200){
						this.yunfei = res.data.data
					}
				})
			},
			// 点击提交订单
			goPay(){
				if(this.isNull(this.type)){
					this.$u.toast("请选择配送方式");
					return;
				}
				if(this.isNull(this.adid)){
					this.$u.toast("请选择收货地址");
					return;
				}
				// 先提交订单，获取订单号 xielianorder.do?p=submitOrderByMini&type=1
				let names=null;
				let params=null;
				console.log("来提交订单了")
				console.log(this.params)
				if(decodeURI(this.params) == undefined || decodeURI(this.params) == "undefined" || this.params==null || this.params==""){
					console.log("1111111")
				}else{
					console.log("2222222")
					let xx = this.names.replaceAll("{","").replaceAll("}","").replaceAll(":","：");
					names = xx.substr(1,xx.length-2);
					params = this.params.replaceAll(/\[/g,"").replaceAll(/\]/g,"");
				}
				console.log("规格："+this.names+" 规格下标："+this.params)
				this.$http.get('/xingyun/submit_orderxcx', {	// type=1表示不打折
						'userid':uni.getStorageSync("usersId"),
						"yId":this.gid,
						"address":this.adid,
						"params": params,
						"guige": names,
						"jianjie":this.liuyan,
						"yunfei":this.yunfei,
						"money":this.num,
				}).then(res => {
					if(res.data.code==200){
						this.$u.toast("下单成功")
						setTimeout(() => {
							uni.navigateTo({
								url:'paySuccess'
							},500)
						})
					}else if(res.data.code==403){
						this.$u.toast("请先登录")
						return
					}else{
						this.$u.toast(res.data.msg)
						return
					}
				})
			},
			// 设置图片路径
			switchImg(s){
				return this.host+s;
			},
			// 点击其他地址
			otherDizhi(){
				uni.navigateTo({
					url:'../../pages/center/shouHuo?from=3'
				})
			},
			// 商品数量的增加减少
			numJia(){
				this.num++;
			},
			numJian(){
				if(this.num==1){
					this.$u.toast("受不了了，再减就没有了哦！");
				}else{
					this.num--;
				}
			},
			//判断是否为空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		},
		filters:{
			resetGuige(s){
				let reg = /{/g;
				let reg2 = /}/g;
				return s.replace(reg,'').replace(reg2,'');
			}
		}
	}
</script>

<style scoped>
	.btn-group{
		display: flex;
		border: 1px solid #ccc;
		margin-right: 10rpx;
		justify-content: space-around;
	}
	.btn-group .jian,.btn-group .num,.btn-group .jia{
		padding: 10rpx 20rpx;
		flex: 1;
		text-align: center;
	}
	.num{
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}
	.peisong-box{
		padding: 20rpx;
		background-color: white;
	}
	.dizhi-box{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		font-size: 14px;
	}
	.peisongType view{
		margin-top: 25rpx;
		padding-bottom: 25rpx;
		border-bottom: 1rpx #c8ccd4 solid;
	}
	.xingzhi{
		margin-top: 20rpx;
		padding-top: 0rpx;
	}
	.xingzhi>view{
		padding: 10rpx;
	}
	.bot-border,.yunfei-box{
		/* border-bottom: 1rpx solid #F4F4F5; */
		height: 100rpx;
		line-height: 100rpx;
	}
	.tips{
		margin-top: 20rpx;
		background-color: white;
		padding-top: 20rpx;
		padding-left: 20rpx;
		font-size: 22rpx;
	}
	.tips2{
		padding-bottom: 20rpx;
	}
	.confirm-btn{
		background-color: #FF7900;
		color: white;
		display: flex;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0rpx 60rpx;
	}
	.dizhi-box .dizhi,.dizhi-box .mapdot{
		flex: 1;
		text-align: center;
		/* margin-right: 20rpx; */
	}
	.dizhi-box .dizhi-info{
		flex: 5;
	}
	.moren{
		color: red;
	}
	.other-box{
		display: flex;
		justify-content: flex-end;
		margin-top: 10rpx;
	}
	.yunfei-box{
		display: flex;
		justify-content: space-between;
	}
	.dizhi-box .tel{
		flex: 2;
	}
	.bottom{
		padding-left: 10rpx;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background: #F4F4F5;
		display: flex;
		justify-content: space-between;
	}
	.bottom text{
		color: red;
	}
	.goods-info{
		margin-top: 20rpx;
		display: flex;
		padding: 10rpx;
		height: 170rpx;
		align-items: flex-start;
		color: #111111;
		background-color: white;
	}
	.goods-info>view{
		flex: 1;
	}
	.guige{
		margin-top: 10rpx;
		/* color: #CCCCCC; */
		font-size: 12px;
	}
	.qian::before{
		content: '￥';
	}
	.goods-name>view{
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		margin-left: 15rpx;
	}
	.goods-info>view:nth-child(2){
		flex: 4;
	}
	.goods-info .goods-img{
		height: 150rpx;
		max-width: 160rpx;
	}
</style>
